import * as React from 'react'
import { connect } from 'react-redux';
import { getAssignment, getReviewQuiz, submitBasicQuizAnswer } from '../../../actions/assignment';
import { Card, Icon, Button, Popconfirm, message } from 'antd/es';
import ReviewQuizBox from '../../common/ReviewQuizBox';
import SingleChoiceQuiz from './SingleChoicQuiz'
import MultipleChoiceQuiz from './MultipleChoiceQuiz'
import BasicBlankQuiz from './BasicBlankQuiz'

const submitTimeBoxStyle = {
    marginLeft: '10px', fontSize: '12px', color: '#BF9FBC'
}
class BasicQuizBody extends React.Component<any>{
    state = {
        answers: [{ quizId: -1, userAnswer: '' }]
    }
    componentDidMount = () => {
        const { id, quizId } = this.props
        this.load(id, quizId)
    }

    componentWillReceiveProps = (nextProps: any) => {
        const { id, quizId } = nextProps
        if (id === this.props.id) {
            return false
        }
        this.load(id, quizId)
        return true
    }

    load = (assignmentId: number, quizId: number) => {
        this.props.getAssignment(assignmentId)
        this.props.getReviewQuiz(assignmentId, quizId)
    }
    modifyAnswer = (quizId: number, userAnswer: string) => {
        const { answers } = this.state
        const index =answers.findIndex((item: any) => item.quizId === quizId)
        if (index !== -1) {
            answers[index].userAnswer = userAnswer
        } else {
            answers.push({ quizId, userAnswer })
        }

        this.setState({
            answers: answers.filter((item: any) => item.quizId > 0)
        })
    }
    submitBasicQuiz = () => {
        let { answers } = this.state
        const { id } = this.props
        if (this.finish()) {
            this.props.submitBasicQuizAnswer(answers, id);
        } else {
            message.warning('还有题目未完成')
        }
    }

    finish = () => {
        const { answers } = this.state
        const { quizzes } = this.props
        return answers.length === quizzes.length
    }

    render() {
        const { quizzes, reviewQuiz, title } = this.props
        return <Card title={title}
            noHovering
            bordered={false}
            extra={<ReviewQuizBox reviewQuiz={reviewQuiz} />}
            key={"quiz.id"}>
            <div>
                <h4>作业内容</h4>
                {reviewQuiz.id
                    ? <span style={submitTimeBoxStyle}>
                        <Icon type='clock-circle' />
                        {reviewQuiz.createTime}
                    </span>
                    :''
                }
                {
                    quizzes.map((quiz: any, index: number) => {
                        if (quiz.type === 'SINGLE_CHOICE') {
                            return <SingleChoiceQuiz key={index} index={index} modifyAnswer={this.modifyAnswer} quiz={quiz} />
                        }
                        if (quiz.type === 'MULTIPLE_CHOICE') {
                            return <MultipleChoiceQuiz key={index} index={index} modifyAnswer={this.modifyAnswer} quiz={quiz} />
                        }
                        if (quiz.type === 'BASIC_BLANK_QUIZ') {
                            return <BasicBlankQuiz key={index} index={index} modifyAnswer={this.modifyAnswer} quiz={quiz} />
                        }
                        return ""
                    })

                }
                {reviewQuiz.id
                    ? ''
                    : <Popconfirm title={'确定提交吗'}
                        onConfirm={this.submitBasicQuiz} okText='Yes'
                        cancelText='No'>
                        <Button className='margin-t-2 margin-b-3' type='primary'>
                            提交</Button>
                    </Popconfirm>
                }

            </div>
        </Card>
    }
}

const mapStateToProps = ({ user, task, assignment, reviewQuiz }:
    { user: any, task: any, assignment: Array<any>, reviewQuiz: any }) => ({
        user,
        task,
        reviewQuiz,
        quizzes: assignment
    })

const mapDispatchToProps = (dispatch: Function) => ({
    getAssignment: (assignmentId: number) => dispatch(getAssignment(assignmentId)),
    submitBasicQuizAnswer: (answers: Array<any>, assignmentId: number) => dispatch(submitBasicQuizAnswer(answers, assignmentId)),
    getReviewQuiz: (assignmentId: number, quizId: number) => dispatch(getReviewQuiz(assignmentId, quizId))

})

export default connect(mapStateToProps, mapDispatchToProps)((BasicQuizBody))
